alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { page } from '$app/state';
3 import { setContext } from 'svelte';
4 import { createProfileCounts, PROFILE_COUNTS_KEY } from '$lib/components/profile/counts.svelte';
5 import EmptyState from '$lib/components/profile/EmptyState.svelte';
6 import ProfileCard from '$lib/components/profile/ProfileCard.svelte';
7 import ProfileTabs from '$lib/components/profile/ProfileTabs.svelte';
8
9 let { children, data } = $props();
10
11 const profileCounts = createProfileCounts(
12 () => data.identity.did,
13 () => data.counts
14 );
15 setContext(PROFILE_COUNTS_KEY, profileCounts);
16 const counts = $derived(profileCounts.value);
17 const tabParam = $derived(page.url.searchParams.get('tab') ?? 'overview');
18 const activeTab = $derived(
19 ['repos', 'starred', 'strings', 'vouches'].includes(tabParam) ? tabParam : 'overview'
20 );
21</script>
22
23<svelte:head>
24 <title>{data.identity.handle} · Tangled</title>
25</svelte:head>
26
27<section class="mx-auto w-full max-w-screen-lg py-6">
28 {#if data.notJoined}
29 <EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
30 {:else}
31 <ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
32 <div class="grid rounded bg-surface shadow-sm md:grid-cols-11 md:gap-4 md:p-6">
33 <aside class="p-6 md:col-span-3 md:p-0">
34 <ProfileCard
35 identity={data.identity}
36 profile={data.profile}
37 followers={counts.followers}
38 following={counts.following}
39 viewerFollowRkey={data.viewerFollowRkey}
40 />
41 </aside>
42 <div class="min-w-0 border-t border-border p-6 md:col-span-8 md:border-t-0 md:p-0">
43 {@render children()}
44 </div>
45 </div>
46 {/if}
47</section>